<template>
  <d2-container>
    <div class="buyCharacters-wrap" :style="{ backgroundImage: bgImg }">
      <div class="page-middle" v-if="!startClone">
        <div class="page-middle-content">
          <div class="right-icon" @click="dialogVisible = true">
            <span>《会员规则》</span>
            <img :src="rightIconImg" alt="" />
            <img :src="rightIconImg" alt="" />
            <img :src="rightIconImg" alt="" />
          </div>
          <div class="middle-top">
            <img v-if="info.avatar" :src="info.avatar" alt="" />
            <img v-else :src="logoutImg" alt="" />
            <div>
              <span>{{info.name}}</span>
              <div>ID: {{info.id}}</div>
            </div>
          </div>
          <el-tabs
            class="middle-tabs"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="购买字符" name="first">
              <div class="middle-chars-list">
                <div v-for="(item, ind) in chars" :key="ind">
                  <div class="chars-top">
                    <div class="chars-top-left">
                      <img :src="charsImg" alt="" />
                      <span>{{ item.coin }}</span>
                    </div>
                    <div class="chars-top-right">
                      <span>￥</span>{{ item.money }}
                    </div>
                  </div>

                  <div class="page-item-left-btn" @click="tobuy(item.id)">
                    立即购买
                  </div>
                  <img class="rose-bg" :src="roseIconImg" alt="" />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="充值记录" name="second">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column type="index" width="50"> </el-table-column>
                  <el-table-column prop="coin" label="充值字符">
                  </el-table-column>
                  <el-table-column prop="money" label="支付金额">
                  </el-table-column>
                  <el-table-column prop="pay_type" label="支付方式">
                  </el-table-column>
                  <el-table-column prop="update_time" label="操作日期">
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="params.page"
                    :page-size="params.page_size"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="消费记录" name="third">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column prop="coin" label="消耗字符">
                  </el-table-column>
                  <el-table-column prop="content" label="使用功能">
                  </el-table-column>
                  <el-table-column prop="create_time" label="消耗记录">
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                   <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="params.page"
                  :page-size="params.page_size"
                >
                </el-pagination>
                </div>
               
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog
      title=""
      custom-class="buyCharacters-dialog"
      width="500px"
      :visible.sync="dialogVisible"
    >
      <div>
        <p>会员规则</p>
        <div v-html="rule"></div>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      custom-class="paymoney-dialog"
      width="820px"
      :visible.sync="buyVisible"
    >
      <div class="paymoney-content">
        <img :src="buyImg" alt="" />
        <div class="paymoney-content-top">支付套餐</div>
        <div class="paymoney-content-center">
          <div class="paymoney-content-left">
            <vue-qr
              :text="payUrl"
              :size="150"
              :margin="14"
              :correctLevel="1"
              colorDark="#333"
              backgroundColor="#eee"
              :callback="getCode"
            ></vue-qr>
            <div :class="`paymoney-content-tab active${payType}`">
              <div @click="tobuy(activeId, 20)">
                <img :src="weixinImg" alt="" />微信
              </div>
              <div @click="tobuy(activeId, 10)">
                <img :src="zhifubaoImg" alt="" />支付宝
              </div>
            </div>
          </div>
          <div class="paymoney-content-right">
            <div>请使用支付宝 扫码支付金额￥<span>{{payItem.money}}</span>元</div>
            <p>订单号：{{payItem.order_no}}</p>
            <p>下单时间：{{payItem.create_time}}</p>
            <p>支付即视您已同意<span  @click="dialogVisible = true">《会员规则》</span></p>
          </div>
        </div>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import { computed, watch } from "vue";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
import VueQr from "vue-qr";
import {  mapState,mapActions } from "vuex";

export default {
  components: { VueQr },
  computed:{
    ...mapState("d2admin/user", ["info"]),
    logoutImg() {
      return `${process.env.VUE_APP_IMAGE}image/common/user-logout.png`;
    },
  },
  data() {
    return {
      tableData: [],
      params: {
        page: 1,
        page_size: 20,
        token: util.cookies.get("token"),
      },
      total: 0,
      activeName: "first",
      startClone: false,
      // 背景图片
      weixinImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/weixin.png`;
      }),
      zhifubaoImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/zhifubao.png`;
      }),
      buyImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/buy-bg.png`;
      }),
      bgImg: computed(() => {
        return `url(${process.env.VUE_APP_IMAGE}image/common/bg.jpg)`;
      }),
      rightIconImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/right-icon.png`;
      }),
      userImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/user.png`;
      }),
      charsImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/chars.png`;
      }),
      roseIconImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/rose-icon.png`;
      }),
      dialogVisible: false,
      buyVisible: false,
      list: [
        {
          totalTime: "12:00:00",
          time: "00:00:00",
          name: "音色名称",
          url: "",
        },
        {
          totalTime: "12:00:00",
          time: "00:00:00",
          name: "音色名称",
          url: "",
        },
      ],
      voiceList: [
        {
          totalTime: "12:00:00",
          time: "00:00:00",
          name: "音色名称",
          url: "",
        },
        {
          totalTime: "12:00:00",
          time: "00:00:00",
          name: "音色名称",
          url: "",
        },
        {
          totalTime: "12:00:00",
          time: "00:00:00",
          name: "音色名称",
          url: "",
        },
      ],
      chars: [],
      rule: "",
      payUrl: "",
      payType: 20,
      payItem:{},
      activeId: "",
      params: {
        current_page: 2,
        per_page: 10,
      },
      messageid: '',
    };
  },
  created() {
    if (this.$socket) {
      // 监听消息事件‌:ml-citation{ref="7" data="citationList"}
      this.$socket.eventBus.$on("socket-message", (data) => {
        console.log(data);
        if (data && data.type === 1 && data.messageid == this.messageid) {
          this.buyVisible = false;
          this.setUserInfo()
          this.$message.success("支付成功！")
        }
      });
    }
  },

  mounted() {
    request({
      url: "/mapi/userChargeRule/index",
      method: "post",
      data: {
        token: util.cookies.get("token"),
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");
      ret.data.map((item) => {
        this.chars.push(item);
      });
      // this.voiceList =
    });
    request({
      url: "/mapi/index/getCommonIntro",
      method: "post",
      data: {
        text: "member_rule",
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");
      this.rule = ret.data.value;
    });
  },
  methods: {
    ...mapActions("d2admin/account", ["setUserInfo"]),
    handleSizeChange(val) {
      this.params.page_size = val;
      this.handleClick();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.handleClick();
    },
    handleClick(val) {
      if (val) {
        this.params = {
          page: 1,
          page_size: 10,
          token: util.cookies.get("token"),
        };
      }
      if (this.activeName === "second") {
        this.getChargeLog();
      } else if (this.activeName === "third") {
        this.getConsumeLog();
      }
    },
    getChargeLog() {
      this.tableData = [];
      // this.total = 0
      request({
        url: "/mapi/userChargeLog/index",
        method: "post",
        data: this.params,
      }).then((ret) => {
        this.total = ret.data.total;
        this.tableData = ret.data.data;
      });
    },
    getConsumeLog() {
      this.tableData = [];
      // this.total = 0
      request({
        url: "/mapi/userConsumeLog/index",
        method: "post",
        data: this.params,
      }).then((ret) => {
        this.total = ret.data.total;
        this.tableData = ret.data.data;
      });
    },
    getCode(code) {
      // console.log(code)
    },
    tobuy(id, value) {
      this.activeId = id;
      if (value) this.payType = value;
      this.messageid = new Date().getTime()
      this.$socket.send({ uid: this.info.id,messageid: this.messageid});
      request({
        url: "/mapi/userChargeLog/create",
        method: "post",
        data: {
          token: util.cookies.get("token"),
          rule_id: id,
          messageid: this.messageid,
          pay_type: this.payType,
        },
      }).then((res) => {
        console.log(res, "requestrequest");
        this.payUrl = res.data.url;
        this.payItem = res.data
        if (!value) {
          
          this.buyVisible = true;
          
        }
        // this.voiceList =
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.buyCharacters-wrap {
  color: #fff;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 28px;
  box-sizing: border-box;

  .page-middle {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 14px 0px;
    height: calc(100% - 20px);

    .page-middle-content {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      padding: 30px 40px;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 19px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(
            157deg,
            rgba(9, 5, 33, 0.7) 0%,
            rgba(16, 9, 52, 0.9) 100%
          ),
          linear-gradient(180deg, rgba(82, 41, 169, 1), rgba(30, 17, 101, 1));
        backdrop-filter: blur(10px);
        z-index: -1;
        opacity: 0.8;
      }

      .right-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 127px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
        span {
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          margin-left: 10px;
        }
      }
      .middle-top {
        display: flex;
        align-items: center;
        margin-bottom: 32px;
        img {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 18px;
        }
        & > div {
          font-size: 14px;
          line-height: 21px;
          span {
            font-size: 18px;
            color: #ffffff;
            line-height: 27px;
          }
        }
      }
      .middle-tabs {
        height: calc(100% - 104px);
        overflow: auto;
        ::v-deep(.el-tabs__header) {
          .el-tabs__item {
            font-size: 16px;
            color: #fff;
            line-height: 25px;
            &:hover,
            &.is-active {
              color: #e540e8;
            }
          }
          .el-tabs__nav-wrap::after {
            background-color: rgba(255, 255, 255, 0.6);
            height: 1px;
          }
          .el-tabs__active-bar {
            bottom: 2px;
            height: 7px;
            background: #e540e8;
            border-radius: 4px 4px 0px 0px;
          }
        }
        ::v-deep(.el-tabs__content) {
          height: calc(100% - 55px);
          .el-tab-pane {
            height: 100%;
            & > div {
              height: 100%;
              .el-table {
                height: calc(100% - 42px);
                overflow: auto;
              }
              .pagination-wrap{
                display: flex;
                padding-top: 12px;
                justify-content: flex-end;
              }
            }
          }
        }
      }
      .page-item-left-btn {
        font-size: 18px;
        min-width: 200px;
        height: 48px;
        line-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 27px;
        border: 2px solid transparent;
        background: transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
          linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));
        img {
          width: 22px;
          height: 17px;
          margin-right: 5px;
        }
        &:hover {
          background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
            linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
        }
        &.cancel {
          background: #541d89;
          &:hover {
            background: #6f2cad;
          }
        }
      }

      .middle-chars-list {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        padding: 40px 0 0;
        & > div {
          width: calc(100% / 3 - 16px);
          height: 248px;
          border-radius: 24px;
          padding: 51px 25px 36px;
          border: 1px solid transparent;
          background: transparent;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: linear-gradient(157deg, #0f0f35 0%, #180f48 100%),
            linear-gradient(167deg, rgba(27, 27, 99, 1), rgba(47, 32, 136, 1));
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          overflow: hidden;
          .rose-bg {
            position: absolute;
            right: 0;
            top: -50%;
            width: 61%;
            opacity: 0.4;
            z-index: 0;
          }
          .chars-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .chars-top-left {
              font-size: 38px;
              color: #e540e8;
              line-height: 52px;
              display: flex;
              align-items: center;
            }
            .chars-top-right {
              font-size: 38px;
              span {
                font-size: 25px;
              }
              // display: flex;
              // align-items: center;
            }
          }
        }
      }
    }
  }
}

::v-deep(.paymoney-dialog) {
  background: transparent;
  .el-dialog__body {
    color: #fff;
    padding: 0;
    font-size: 18px;
    line-height: 25px;
    height: 350px;
    .paymoney-content {
      position: relative;
      height: 100%;
      padding: 32px 43px 36px;
      & > img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
      }
      .paymoney-content-top {
        font-size: 34px;
        line-height: 47px;
        margin-bottom: 29px;
      }

      .paymoney-content-center {
        display: flex;
        .paymoney-content-left {
          & > img {
            border-radius: 9px;
          }
          .paymoney-content-tab {
            margin-top: 14px;
            width: 155px;
            height: 37px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            display: flex;
            position: relative;
            transition: left 0.3s;
            &::before {
              content: "";
              position: absolute;
              height: 100%;
              width: 50%;
              left: 0;
              top: 0;
              z-index: -1;
              background: #fff;
              border-radius: 8px;
            }
            &.active20 {
              &::before {
                left: 0;
                transition: left 0.3s;
              }
              & > :first-child {
                color: #000;
              }
            }
            &.active10 {
              &::before {
                left: 50%;
                transition: left 0.3s;
              }
              & > :last-child {
                color: #000;
              }
            }
            div {
              cursor: pointer;
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              color: #fff;
              img {
                margin-right: 2px;
              }
            }
          }
        }
        .paymoney-content-right {
          padding-left: 33px;
          & > div {
            font-size: 20px;
            line-height: 27px;
            margin-bottom: 26px;
            margin-top: -18px;
            span {
              font-size: 41px;
              line-height: 58px;
              padding: 0 6px;
            
            }
          }
          p {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 22px;
            margin: 0 0 4px;
            span {
              cursor: pointer;
              color: rgba(229, 64, 232, 1);
              &:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}

::v-deep(.buyCharacters-dialog) {
  background: transparent;
  .el-dialog__body {
    color: #fff;
    padding: 40px 30px;
    min-height: 260px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
        203deg,
        RGBA(24, 49, 117, 0.9) 0%,
        RGBA(16, 13, 52, 0.9) 30%,
        RGBA(16, 13, 52, 0.9) 70%,
        RGBA(65, 18, 102, 0.9) 100%
      ),
      linear-gradient(167deg, rgba(55, 55, 255, 1), rgba(39, 176, 255, 1));
    font-size: 18px;
    line-height: 25px;
    & > div {
      & > div {
        max-height: 300px;
        overflow: auto;
      }

      & > p {
        margin: 0;
        text-align: center;
        font-size: 28px;
        line-height: 38px;
      }
    }
  }
  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}
</style>
